<template>
	<view class="page" v-cloak>
		<fu-loading v-if="isShowLoading"></fu-loading>
		<block v-else>
			<view class="bg-white margin-lr-24 margin-top-24 radius-16 padding-lr-24">
				<view class="padding-tb-32 solid-bottom">
					<view class="flex align-stretch">
						<view class="fu-block-140">
							<fu-image :src="afterorder_goods.goods_thumb" radius="16" mode="aspectFill"></fu-image>
						</view>
						<view class="flex justify-between flex-direction flex-sub margin-left-24" style="min-width: 1px;">
							<view>
								<view class="fu-fs28 text-333 text-cut">{{ afterorder_goods.goods_name || '' }}</view>
								<view class="flex align-center margin-top-16">
									<view class="flex align-center margin-right-48">
										<image src="https://localelife.chunchuangkeji.cn/h5img/images/007.png" class="fu-block-22 margin-right-6"></image>
										<text class="text-666 fu-fs20" v-if="afterorder_goods.is_appointment">需要预约</text>
										<text class="text-666 fu-fs20" v-else>无需预约</text>
									</view>
									<view class="flex align-center">
										<image src="https://localelife.chunchuangkeji.cn/h5img/images/008.png" class="fu-block-22 margin-right-6"></image>
										<text class="text-666 fu-fs20">{{afterorder_goods.business_hours}}</text>
									</view>
								</view>
							</view>
							<view class="flex align-center justify-between">
								<view class="flex align-baseline">
									<view class="fu-fs32 text-bold text-prices" style="color: #FF5C5C;">
										<text class="text-price fu-fs20"></text>
										{{ afterorder_goods.shop_price || 0 }}
									</view>
									<text class="margin-left-16 text-999 fu-fs20 text-through">
										¥{{afterorder_goods.market_price || 0}}
									</text>
								</view>
								<text class="text-999">x{{afterorder_goods.num || 1}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="bg-white padding-tb-32">
							<view class="flex justify-between align-center fu-fs32">
								<view class="text-333 text-bold fu-fs28">
									{{ i18n['售后选择'] }}
								</view>
								<view class="text-333 fu-fs28">
									<text class="margin-right-sm">退款</text>
									<!-- <text class="cuIcon-right" class="margin-left-sm"></text> -->
								</view>
							</view>
							<view class="flex justify-between align-center fu-fs32 margin-top" @click="toggleTab('reason')">
								<view class="text-333 text-bold fu-fs28">
									{{ i18n['退款原因'] }}
								</view>
								<view class="text-333 flex-sub flex align-center justify-end fu-fs28" style="min-width: 1px;">
									<text class="margin-right-sm"
										:class="[refund_reason ? 'text-333' : 'text-999']">{{ refund_reason ? refund_reason : '请选择退款原因' }}</text>
									<text class="cuIcon-right"></text>
								</view>
							</view>
							<view class="flex justify-between align-center fu-fs32 margin-top">
								<view class="text-333 text-bold fu-fs28">
									{{ i18n['退款金额'] }}:
								</view>
								<view class="text-prices text-bold" style="color: #FF5C5C;">
									<text class="text-price">{{afterorder_goods.refund_money}}</text>
								</view>
							</view>
							<!-- <view class="text-999 fu-fs24 margin-top-xs padding-bottom solid-bottom">
				  {{ i18n['含发货运费'] }}{{express_price}}{{ i18n['元，不可修改'] }}
				</view> -->
							<view class="padding-tb fu-fs32">
								<view class="text-lg text-333 margin-bottom-sm text-bold fu-fs28">{{ i18n['退款说明'] }}</view>
								<view class="bg-f6 padding-sm">
									<textarea maxlength="200" class="w100 text-333 fu-fs28 height-220" v-model="refund_content"
										:placeholder="i18n['请在此描述申请售后服务的原因']" placeholder-class="text-bf" />
									<view class="fu-fs24 text-bf text-right">
										{{refund_content.length>200?'200':refund_content.length}}/200</view>
								</view>
							</view>
							<fu-upload col="4" max="3" @change="handleImageUpload"></fu-upload>
						</view>
			</view>
			<view class="submit-btn margin-lr height-88 line-height-88 text-center bg-theme text-white fu-fs32 round"
				@click.stop="handleSubmit">{{ i18n['提交'] }}</view>
		</block>
		<fu-notwork></fu-notwork>
		<view class="sex-wrap">
			<w-picker :visible.sync="visible" mode="selector" :value="refund_type" default-type="name"
				:themeColor="themeColor" :default-props="defaultProps" :options="staicon"
				@confirm="onConfirm($event,'selector')" ref="selector">{{i18n['售后类型']}}</w-picker>
		</view>
		<w-picker :visible.sync="visible" mode="selector" :value="refund_reason" default-type="reason"
			:themeColor="themeColor" :default-props="defaultReasonProps" :options="reasonList"
			@confirm="onConfirm($event,'reason')" ref="reason">{{ i18n['退款原因'] }}</w-picker>
	</view>
</template>

<script>
	import {
		UploadImage
	} from '@/common/utils/index';
	import {
		UPLOAD_IMAGE_URL
	} from '@/common/config.js';
	import FuUpload from '../../components/fu-upload/fu-upload.vue';
	// @see 引入组件wPicker
	import wPicker from "../../components/w-picker/w-picker.vue";
	export default {
		components: {
			FuUpload,
			wPicker
		},
		data() {
			return {
				back: '',
				order_sn: '',
				order_type: '',
				itemIndex: 0, // 订单列表索引
				status: '', // 订单状态，用于判断用户是否可以发起退货 status >= 2 可以退货
				sku_id: '',
				afterorder_goods: '', // 发起退款的商品信息
				reasonList: [], // 退款原因列表
				refund_reason: '', // 当前选中的退款原因
				defaultReasonProps: {
					"label": "reason",
					"value": "id"
				},
				staicon: [{
					name: global.i18n['退款(无需退货)'],
					id: '1'
				}], // 退款原因
				defaultProps: {
					"label": "name",
					"value": "id"
				},
				typeIndex: 0,
				refund_content: '',
				arrList: [],
				visible: false,
				express_price: 0,
				real_money: 0, //实际支付金额
				isLoading: false, // 防止连点
				isShowLoading: true
			};
		},
		computed: {
			refund_type() {
				return this.staicon[this.typeIndex].id;
			},
			themeColor() {
				return this.$store.state.themeColor
			}
		},
		onLoad(options) {
			const {
				back = 1,
					order_sn,
					order_type = 3,
					itemIndex,
					status
			} = options;
			this.setNavigationBarTitle(this.i18n['申请售后']);
			if (back) this.back = Number(back);
			if (order_sn) this.order_sn = order_sn;
			if (order_type) this.order_type = order_type;
			if (itemIndex) this.itemIndex = itemIndex;
			if (status) this.status = status;
			let goods = uni.getStorageSync("afterorder_goods")
			if (goods) {
				let afterorder_goods = JSON.parse(uni.getStorageSync("afterorder_goods"));
				let goods_id = afterorder_goods.goods_id;
				let sku_id = afterorder_goods.sku_id;
				let num = afterorder_goods.num;
			}
			switch (this.status) {
				case '2':
				case '3':
				case '4':
					this.staicon = [{
						name: this.i18n['退款(无需退货)'],
						id: '1'
					}, {
						name: this.i18n['退货退款'],
						id: '2'
					}];
					break;
			}
			this.getReasonList();
			this.postRefundMoney();
		},
		onUnload() {
			uni.removeStorageSync("afterorder_goods");
		},
		methods: {
			postRefundMoney() {
				this.$api.post(global.apiUrls.postRefundMoney, {
					order_sn: this.order_sn
				}).then(res => {
					this.isShowLoading = false
					if (res.data.code == 1) {
						this.afterorder_goods = res.data.data;
					}
				}).catch(() => {
					this.isShowLoading = false
				});
			},
			/**
			 * @event
			 * @description 所在地的选择弹窗显示
			 */
			toggleTab(ref) {
				this.$refs[ref].show();
			},
			/**
			 * @event
			 * @description 所在地选择事件
			 * @param {Object} result - 用户所在地弹窗选择的值
			 */
			onConfirm(result, type) {
				if (type == 'selector') {
					let index = this.staicon.findIndex(item => item.id == result.obj.id);
					this.typeIndex = index;
				}
				if (type == 'reason') {
					this.refund_reason = result.obj.reason;
				}

			},
			/**
			 * @description 获取退货原因列表
			 */
			getReasonList() {
				this.$api.post(global.apiUrls.getReasonList, {
					type: 1
				}).then(res => {
					if (res.data.code == 1) {
						this.reasonList = res.data.data;
					}
				});
			},
			handleImageUpload(e) {
				this.arrList = e;
			},
			// 提交
			handleSubmit() {
				if (this.isLoading) return;
				uni.hideKeyboard();
				if (!this.refund_reason) {
					return this.$message.info('请选择退款原因');
				}
				let postData = {
					order_sn: this.order_sn,
					refund_type: 1,
					refund_reason: this.refund_reason,
					goods_id: this.afterorder_goods.goods_id,
					sku_id: this.afterorder_goods.sku_id,
					refund_money: this.afterorder_goods.refund_money,
					num: this.afterorder_goods.num,
				};
				let refund_picture = '';
				if (this.arrList.length != 0) {
					refund_picture = this.arrList.join(',');
				}
				if (refund_picture) {
					postData.refund_picture = refund_picture;
				}
				if (this.refund_content) {
					postData.refund_content = this.refund_content;
				}
				this.isLoading = true;
				this.$api.post(global.apiUrls.postGoodsAfterSale, postData).then(res => {
					if (res.data.code == 1) {
						this.$message.info("售后申请已提交");
						uni.$emit('onPageUpdata', {
							type: 6,
							index: this.itemIndex
						});
						uni.$emit('onOrederDetailPageUpdata')
						setTimeout(() => {
							this.isLoading = false;
							uni.navigateBack({
								delta: this.back
							});
						}, 800);
					} else {
						this.isLoading = false;
						this.$message.info(res.data.msg);
					}
				}).catch(err => {
					this.isLoading = false;
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		padding-bottom: 120rpx;
		padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));

		.submit-btn {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 40rpx;
			bottom: calc(40rpx + constant(safe-area-inset-bottom));
			bottom: calc(40rpx + env(safe-area-inset-bottom));
		}
	}

	/deep/ .sex-wrap .w-picker-view {
		height: 228rpx;
	}

	/deep/ .w-picker-item {
		position: relative;

		&::before {
			content: '';
			width: 100%;
			height: 1px;
			background: #eee;
			transform: scaleY(0.5);
			position: absolute;
			top: 0;
			left: 0;
		}

		&::after {
			content: '';
			width: 100%;
			height: 1px;
			background: #eee;
			transform: scaleY(0.5);
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}
</style>
